<!--vue模板-->
<template>
  <!--工具栏-->
  <div class="toolbar">
    <el-button type="primary" size="small" @click="save">保存</el-button>
  </div>

  <!--基本信息-->
  <el-form>
    <el-row style="height: 40px; line-height: 40px">
      <el-col :span="24">&nbsp;&nbsp;基本信息</el-col>
    </el-row>

    <el-row>
      <el-col :span="2">单据主题:</el-col>
      <el-col :span="4">
        <el-input v-model="enquiry.subject"></el-input>
      </el-col>
      <el-col :span="2">单据编号:</el-col>
      <el-col :span="4">
        <el-input :disabled="true" placeholder="保存后自动生成"></el-input>
      </el-col>
      <el-col :span="2">来源单据类型:</el-col>
      <el-col :span="4">
        <el-select
          class="m-2"
          placeholder="Select"
          v-model="enquiry.sourceType"
        >
          <el-option
            v-for="item in sourceOptions"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-col>
      <el-col :span="2">来源单据:</el-col>
      <el-col :span="4">
        <el-input v-model="enquiry.sourceSubject">
          <template #suffix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="2">定价人员:</el-col>
      <el-col :span="4">
        <el-input v-model="enquiry.priceUser"></el-input>
      </el-col>
      <el-col :span="2">询价日期:</el-col>
      <el-col :span="4">
        <el-date-picker
          v-model="enquiry.enquiryDate"
          type="date"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          placeholder="询价日期"
        />
      </el-col>
      <el-col :span="2">询价人员:</el-col>
      <el-col :span="4">
        <el-input v-model="enquiry.enquiryUser"></el-input>
      </el-col>
      <el-col :span="2">关联项目</el-col>
      <el-col :span="4">
        <el-input v-model="enquiry.project"></el-input>
      </el-col>
    </el-row>

    <el-row style="height: 110px; line-height: 110px" class="btm">
      <el-col :span="2">备注:</el-col>
      <el-col :span="22">
        <el-input
          type="textarea"
          :rows="3"
          resize="none"
          v-model="enquiry.note"
        ></el-input>
      </el-col>
    </el-row>
  </el-form>

  <!---询价产品-->
  <enquiry-product :id="billid" @updateProduct="chgproduct"></enquiry-product>

  <!--询价详情-->
  <EnquiryDetail @updateDetail="updateDetail"></EnquiryDetail>

  <!--附件-->
  <attachment @refreshData="chgatt"></attachment>
</template>

<!--vue 组件选项定义-->
<script>
import { Search } from "@element-plus/icons-vue";
import Attachment from "../../components/Attachment.vue";
import EnquiryProduct from "./EnquiryProduct.vue";
import EnquiryDetail from "./EnquiryDetail.vue";
export default {
  data() {
    return {
      //来源
      billid: "", //单据id
      sourceOptions: [],
      purchaseTypes: [],
      enquiry: {
        subject: "",
        sourceType: "",
        sourceSubject: "",
        sourceId: "",
        priceUser: "",
        enquiryDate: "",
        enquiryUser: "",
        project: "",
        note: "",
        purchaseDetailId: "",
        attachments: [],
        enquiryProduct: {},
        enquiryDetails: [],
      },
    };
  },

  components: {
    Search,
    Attachment,
    EnquiryProduct,
    EnquiryDetail,
  },
  created() {
    this.querySourceType();
    this.billid = this.$route.query.id;
    this.enquiry.purchaseDetailId = this.billid;
  },
  methods: {
    updateDetail(details){
      this.enquiry.enquiryDetails=details;
    },
    chgproduct(pro){
      this.enquiry.enquiryProduct=pro;
    },
    chgatt(data) {
      this.enquiry.attachments = data;
    },

    //查询单据来源类型
    querySourceType() {
      this.$http
        .get("/api/dict/queryDictByTypes", { types: "sourceType,purchaseType" })
        .then((res) => {
          if (res.code == 200) {
            this.sourceOptions = res.result["sourceType"];
            this.purchaseTypes = res.result["purchaseType"];
          }
        });
    },

    //保存方法
    save() {

      if (this.enquiry.enquiryDetails == 0) {
        this.$message.warning("询价详情不能为空！");
        return;
      }



      //保存
      this.$http.post("/api/enquiry/save", this.enquiry).then((res) => {
        if (res.code == 200) {
          this.$message.success("保存成功");
          this.$router.push("/purchase");
        }
      });
    },
  },
};
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
:deep(.el-row) {
  border: #c0ccdd solid 1px;
  border-bottom-style: none;
  height: 50px;
  line-height: 50px;
  background-color: #f9fcff;
}
:deep(.el-col-2) {
  text-align: right;
  padding-right: 10px;
}

:deep(.el-textarea) {
  vertical-align: middle;
}
.btm {
  border-bottom: #c0ccdd solid 1px;
}

.detail {
  height: 40px;
  line-height: 40px;
  border: #c0ccdd solid 1px;
  background-color: #f9fcff;
  margin-top: 20px;
  padding-left: 10px;
  border-bottom-style: none;
}

.toolbar {
  height: 40px;
  line-height: 40px;
  margin-bottom: 15px;
}
</style>
